<template>
	<el-card style="margin: -20px -10px;position: relative;">
		<!-- 页头 -->
		<el-page-header slot="header" title="返回商品列表" :content="goods.id ? '更新商品' : '发布商品'" @back="goBack"></el-page-header>

		<!-- 商品模块 -->
		<el-tabs>
			<el-tab-pane label="基础信息">
				<base-info ref="baseInfo" :goods="goods"></base-info>
			</el-tab-pane>
			<el-tab-pane label="图片信息">
				<image-info ref="imageInfo" :goods="goods"></image-info>
			</el-tab-pane>
			<el-tab-pane label="规格信息">
				<sku-info ref="skuInfo" :goodsSkus="goods.skus"></sku-info>
			</el-tab-pane>
			<el-tab-pane label="概述信息">
				<sketch-info ref="sketchInfo" :type="goods.sketchType" :sketch="goods.sketch"></sketch-info>
			</el-tab-pane>
			<el-tab-pane label="参数信息">
				<specs-info ref="specsInfo" :specs="goods.specs"></specs-info>
			</el-tab-pane>
		</el-tabs>

		<!-- 发布按钮 -->
		<el-button class="btn-save" size="small" type="primary" icon="el-icon-s-promotion" @click="submit">
			{{goods.id ? '立即更新' : '立即发布'}}
		</el-button>
	</el-card>
</template>

<script>
	import baseInfo from '@/components/goods/base-info.vue';
	import imageInfo from '@/components/goods/image-info.vue';
	import skuInfo from '@/components/goods/sku-info.vue';
	import sketchInfo from '@/components/goods/sketch-info.vue';
	import specsInfo from '@/components/goods/specs-info.vue';

	import axios from 'axios';

	export default {
		components: {
			baseInfo,
			imageInfo,
			skuInfo,
			sketchInfo,
			specsInfo
		},
		provide() {
			return {
				bannerGroups: this.bannerGroups
			}
		},
		data() {
			return {
				bannerGroups: [],
				goods: {}
			}
		},
		created() {
			const id = this.$route.query.id;
			if (id) this.findDetails(id);
		},
		methods: {
			findDetails(id) {
				const loading = this.$loading({
					text: '加载中...'
				});
				this.$util.request('/goods/details', {
					id
				}, (res) => {
					loading.close();

					if (res.state == 'ok') {
						this.goods = res.goods;
					} else {
						this.$util.msg(res.msg);
					}
				}, true);
			},
			goBack() {
				if (this.goods.id) {
					window.close();
				} else {
					this.$router.back();
				}
			},
			submit() {
				// 获取参数
				const baseInfo = this.$refs.baseInfo.returnValue();
				if (!baseInfo) return;
				const imageInfo = this.$refs.imageInfo.returnValue();
				if (!imageInfo) return;
				const skuInfo = this.$refs.skuInfo.returnValue();
				if (!skuInfo) return;
				const sketchInfo = this.$refs.sketchInfo.returnValue();
				if (!sketchInfo) return;
				const specsInfo = this.$refs.specsInfo.returnValue();

				//提交
				this.$confirm('确定提交商品吗？').then(_ => {
					const loading = this.$loading({
						text: '提交中...'
					});

					// 将轮播图地址集合转为字符串
					const banners = imageInfo.bannerGroups.map(e => {
						return {
							name: e.name,
							urls: e.urls.join(',')
						};
					});
					// 将规格按价格排序
					skuInfo.sort((a, b) => {
						return a.price > b.price ? 1 : -1;
					});
					const data = Object.assign({
						thumbUrl: imageInfo.thumbUrl,
						price: skuInfo[0].price,
						sketchType: sketchInfo.type,
						skuType: skuInfo.length > 1 ? 1 : 0
					}, baseInfo);
					if (this.goods.id) data.id = this.goods.id;
					axios.request({
						url: `/goods/${this.goods.id ? 'update' : 'submit'}`,
						baseURL: this.$util.baseUrl,
						headers: {
							token: this.$store.getters.token,
							'content-type': 'application/json'
						},
						params: data,
						data: {
							specs: specsInfo,
							sketch: sketchInfo.sketch,
							skus: skuInfo,
							banners: banners
						},
						method: 'POST',
					}).then(res => {
						res = res.data;
						if (res.state == 'ok') {
							this.$message.success('提交成功');
							this.goBack();
						} else {
							this.$util.msg(res.msg);
						}
					}).catch(_ => {
						this.$util.msg('提交失败，请检查登录状态及权限');
					}).finally(_ => {
						loading.close();
					});
				}).catch(_ => {});
			}
		}
	}
</script>

<style>
	.btn-save {
		position: absolute;
		right: 20px;
		top: 15px;
	}
</style>
